<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>7_固定定位全屏遮罩</title>
        <style>
            .mask{
                background-color: rgba(0,0,0,.4);
                /*固定定位以视口(html窗口)为参照物
                紧贴四个边,实现撑满全屏的效果*/
                position: fixed;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;

            }
        </style>
    </head>
    <body>
        <div class="mask"></div>
        <div>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A architecto dicta dolores ea, earum est hic
                iste molestias numquam quae quibusdam quis rem rerum sed vel vitae voluptas voluptatem? Maxime?
            </div>
            <div>Ab dolorem eos, excepturi expedita id impedit ipsa modi natus nulla rerum tempora ullam. Accusantium
                asperiores autem cupiditate deserunt est fugit illo impedit incidunt nemo quos sapiente sit ut,
                voluptatibus?
            </div>
            <div>At autem delectus dicta est laudantium natus quod tenetur? Alias amet asperiores blanditiis
                consequuntur corporis dolor ipsa itaque magni officiis quae quo rem soluta, tenetur ullam velit!
                Consectetur, minus, rerum.
            </div>
            <div>Consequatur debitis esse eum excepturi inventore veritatis? Dignissimos dolorem minima non numquam
                placeat? Cupiditate expedita explicabo numquam odio sunt? Aliquid dignissimos, eum fugiat id in laborum
                molestias repellendus sint veritatis.
            </div>
            <div>Accusamus, animi asperiores autem consectetur consequuntur dignissimos doloribus dolorum eaque enim
                exercitationem facere ipsa, iure labore mollitia numquam officiis possimus quaerat quibusdam quisquam
                voluptate? Architecto aspernatur eum facere labore optio.
            </div>
            <div>A blanditiis debitis deserunt doloremque enim et facere in ipsa, iure necessitatibus nemo neque nihil
                numquam officia optio praesentium quaerat quibusdam quidem quis quos recusandae sint unde velit vero
                vitae!
            </div>
            <div>Ad adipisci aspernatur consequuntur corporis culpa delectus dolores ea earum enim hic ipsum, iste minus
                molestias nam nostrum odio odit pariatur, quas quibusdam quo reprehenderit sit, tempora ut vero
                voluptatum?
            </div>
            <div>Accusamus accusantium at autem consequatur est excepturi nam neque non quia, sequi sit tempore. Aliquam
                distinctio ipsum labore natus nostrum obcaecati officia optio provident quibusdam rem repellendus
                repudiandae, sunt voluptate!
            </div>
            <div>Adipisci animi autem delectus, doloribus earum eum ipsam iste labore magnam, nobis praesentium, quaerat
                quis repudiandae sapiente vitae! At blanditiis enim illum impedit in iure molestiae necessitatibus neque
                perferendis repellendus.
            </div>
            <div>Architecto ducimus eveniet exercitationem, ipsa possimus suscipit tenetur. Adipisci asperiores
                assumenda atque aut, culpa dicta dolore ducimus, earum id inventore ipsam necessitatibus non possimus
                quasi quis ratione recusandae soluta totam!
            </div>
            <div>Accusamus asperiores doloremque earum, illo laboriosam laudantium libero natus neque, numquam quae
                reprehenderit repudiandae sunt ut? Delectus doloribus expedita facilis inventore libero mollitia natus
                pariatur quis rerum sunt. Asperiores, repellat.
            </div>
            <div>Adipisci commodi cupiditate dolor dolore dolorum facilis illo iste modi natus nesciunt, obcaecati odio
                praesentium quae quaerat rem repellat sint ullam veniam. Aliquam esse nisi non provident recusandae
                totam velit?
            </div>
            <div>Alias facilis iure nobis numquam tenetur. Adipisci blanditiis consectetur, dolore ea laudantium magnam
                maiores maxime molestiae mollitia nobis officia pariatur perferendis quam quasi quidem quis rem
                reprehenderit voluptates. Facere, ipsam!
            </div>
            <div>Animi delectus earum, eius facere illum itaque labore, magni molestiae nulla odit praesentium quo
                reiciendis sapiente sint soluta vero vitae voluptatibus? Ab amet architecto cupiditate delectus harum
                porro rem repudiandae!
            </div>
            <div>Accusamus ad alias aliquam aspernatur cupiditate debitis delectus doloribus eligendi eos est eum
                excepturi inventore laboriosam minus nesciunt obcaecati omnis placeat praesentium, provident quibusdam
                repellendus sed vel vitae voluptates voluptatibus!
            </div>
            <div>Asperiores atque deleniti dolore ea earum optio rem sequi velit. Animi enim, error excepturi
                exercitationem expedita illum ipsa minus molestiae nesciunt nulla quaerat ratione tempora voluptatum.
                Enim esse porro tempore.
            </div>
            <div>Aliquam commodi consectetur consequatur cum dignissimos dolor doloremque ducimus ea, eius error harum
                impedit inventore ipsa iste iure minima modi, molestias nobis non perferendis reiciendis repellendus,
                reprehenderit sequi temporibus unde!
            </div>
            <div>Ad architecto aspernatur beatae corporis dicta dolorum ex exercitationem facere fugit illo impedit
                itaque laboriosam necessitatibus nemo numquam odio optio quasi quia quo quod quos rerum, soluta suscipit
                veritatis voluptatem.
            </div>
            <div>Accusamus corporis dolorem earum eius eveniet facilis fugiat harum id, iste laboriosam molestiae,
                mollitia nostrum rem saepe sequi sunt vitae. Adipisci amet autem exercitationem facilis harum nobis
                recusandae sequi tenetur.
            </div>
            <div>Ab ad adipisci amet at dolor eaque, fugit incidunt, iste iure labore modi molestias natus nostrum
                numquam porro quo, repudiandae saepe totam ullam voluptatem. Assumenda qui quibusdam reprehenderit vero
                voluptas.
            </div>
            <div>Ducimus eveniet illo magnam nisi porro qui quia voluptas. Aliquam animi asperiores aspernatur
                doloremque eius exercitationem impedit libero molestiae nostrum nulla officiis, placeat quis sed? Et
                mollitia officia provident veritatis.
            </div>
            <div>Animi asperiores, aspernatur aut blanditiis delectus distinctio dolorum eius expedita id impedit in
                ipsam ipsum molestiae natus optio perferendis praesentium quas, quos totam vel. Enim facilis nulla quod
                sequi veniam.
            </div>
            <div>Aut consequuntur debitis deserunt dignissimos dolores explicabo nisi officiis quidem voluptates.
                Consequatur debitis delectus dolores eveniet, fuga illo illum incidunt iste nostrum numquam quae quam
                qui repellat repellendus sunt voluptatibus.
            </div>
            <div>Debitis fugit hic iure laboriosam, libero maxime neque officiis saepe similique ullam. Accusantium
                alias aliquam amet architecto aspernatur, corporis culpa distinctio ducimus eaque in iure, laboriosam
                nulla veniam veritatis voluptatum.
            </div>
            <div>Consequatur, cupiditate earum ex exercitationem hic iste modi nesciunt non pariatur perspiciatis
                placeat qui sit voluptatum. Ab aliquam aliquid aspernatur at, eos illum labore, maxime nesciunt placeat,
                quod sequi sit.
            </div>
            <div>Aut beatae commodi cupiditate, dignissimos enim, explicabo fuga mollitia nemo, nesciunt odio quaerat
                reiciendis veniam voluptates. Aperiam eius eveniet id illo incidunt laudantium nostrum perferendis
                perspiciatis voluptate voluptatibus. Aperiam, perspiciatis.
            </div>
            <div>Accusamus adipisci aliquid cumque debitis delectus deleniti dignissimos dolor ducimus est harum illum
                inventore iste iusto laborum libero magni necessitatibus omnis placeat quisquam quod ratione saepe
                sapiente, similique tempore totam.
            </div>
            <div>Beatae cumque dolorem fugiat illo, in ipsum iste iusto labore laudantium, necessitatibus quae, quisquam
                saepe tempore vero voluptates. Dolor doloribus enim illum perferendis quis similique, tempore? Hic illo
                libero veritatis.
            </div>
            <div>Accusantium autem dignissimos enim et, eveniet exercitationem laboriosam nisi quas, similique, soluta
                tenetur ullam vero voluptas? Architecto cum ipsa laborum possimus tenetur? Accusamus deserunt eligendi
                eum fuga ipsum optio reiciendis.
            </div>
            <div>Animi assumenda aut consequuntur dicta est explicabo fugit ipsam laboriosam nemo neque omnis optio
                pariatur provident quam quas quo, recusandae rem rerum sapiente sed tempore unde, voluptatem.
                Accusantium aut, esse.
            </div>
            <div>Alias assumenda aut cum cupiditate dicta, dolorem eligendi eveniet, excepturi illo magnam minus
                obcaecati odit pariatur perferendis, perspiciatis porro quaerat quasi saepe sed tenetur? Dolor et illum
                ipsam quas sapiente.
            </div>
            <div>Amet dignissimos dolor excepturi fugiat illum nemo pariatur, quae, qui repudiandae sint tempore veniam.
                Enim, eum fugit iure quam quasi ratione tenetur voluptatum. A culpa, eius eos fugiat quasi voluptatibus!
            </div>
            <div>Aspernatur est, eveniet harum in ipsum omnis ratione suscipit voluptas! Ab, architecto atque
                consequuntur doloribus eos fugiat laboriosam, laudantium magnam modi nisi numquam obcaecati praesentium
                reiciendis tempora temporibus veritatis, vitae.
            </div>
            <div>Amet atque blanditiis consequatur culpa distinctio dolor earum eius eligendi esse est, exercitationem
                laudantium, nisi quis repellat velit. Assumenda cumque dolor ex expedita minima natus non praesentium,
                quidem recusandae sed?
            </div>
            <div>Aliquam architecto dignissimos eaque eligendi eum explicabo in mollitia nesciunt nulla porro possimus
                praesentium quae, quisquam recusandae sed similique suscipit vel velit? Aperiam deleniti distinctio
                dolor esse explicabo tempora vitae.
            </div>
            <div>Consectetur dolores in iure, quaerat repellat soluta voluptatem. Ab, accusantium adipisci aperiam
                architecto, aut corporis cumque dignissimos dolorum ducimus expedita incidunt magnam neque nobis
                perspiciatis, porro sequi tenetur veniam! Omnis.
            </div>
            <div>Deserunt, inventore, odit. Architecto ex facere hic ipsam iste magnam magni nesciunt nobis optio quasi
                quos ratione saepe sapiente, similique voluptate? Corporis, dolorem explicabo id iusto maxime mollitia
                perferendis quis.
            </div>
            <div>Accusamus alias aliquam aperiam blanditiis corporis culpa, debitis eos excepturi, iure iusto labore
                maiores minus modi molestiae molestias neque obcaecati officiis optio pariatur rem repudiandae sed sint
                suscipit vel veniam.
            </div>
            <div>Architecto delectus dicta harum minima quia suscipit vel? Accusantium delectus magnam minima minus,
                nihil provident qui reiciendis. At autem impedit in inventore nisi nulla quae quibusdam quisquam,
                reprehenderit, tenetur, voluptatibus!
            </div>
            <div>Adipisci animi dignissimos distinctio error, facere, inventore itaque iusto magni molestias nesciunt
                nostrum quae, quasi tenetur vero voluptatibus. Aspernatur beatae dolor eligendi enim eos iste odit quam,
                quidem ratione totam!
            </div>
            <div>Aliquid aspernatur cumque distinctio ea enim est facere fuga hic in itaque molestiae nam nihil nostrum
                numquam optio pariatur porro praesentium quibusdam quidem quo reprehenderit repudiandae, sequi tenetur
                totam voluptatibus.
            </div>
            <div>Atque consectetur corporis dolor enim hic mollitia odio quia recusandae! Aliquam blanditiis ea iure sed
                vel! Doloremque ducimus ea error excepturi id laborum, mollitia quam quisquam, quo repellat tempora
                ullam.
            </div>
            <div>Accusantium alias aliquid amet consequuntur corporis culpa cum dolorem doloremque ea, eaque enim est ex
                laudantium minus natus nostrum omnis possimus quae qui, quia saepe temporibus tenetur totam ut
                voluptatum.
            </div>
            <div>A accusamus alias amet architecto dicta dolorem eligendi, excepturi explicabo fugit hic illum iste,
                labore laudantium molestias pariatur provident quas ratione reprehenderit temporibus totam! Beatae
                laboriosam ratione recusandae velit veniam.
            </div>
            <div>Accusantium autem consectetur consequatur consequuntur corporis dolores eius eos esse expedita fugiat
                ipsam iure maiores mollitia nam nihil nulla obcaecati, officiis quibusdam quisquam reiciendis repellat
                reprehenderit sed sint voluptatem voluptatibus!
            </div>
            <div>At distinctio ea eos est explicabo fuga illum iste magni, molestiae molestias neque perferendis, qui,
                quo suscipit tenetur. Illum neque nobis optio pariatur perferendis. At corporis error officiis quo
                reiciendis.
            </div>
            <div>Ad aperiam beatae, commodi cupiditate debitis deserunt dolor error excepturi expedita fuga fugiat harum
                hic impedit labore minima natus neque nisi, numquam odit officia perspiciatis reiciendis, rerum sequi
                unde vel.
            </div>
            <div>Consequatur molestiae necessitatibus nesciunt nihil totam? Architecto autem culpa cum, delectus dicta
                distinctio dolorem ea eos exercitationem expedita fugit itaque maiores nihil non quaerat, repellendus
                reprehenderit sequi soluta, ullam vel?
            </div>
            <div>Accusamus atque commodi esse ipsa minima praesentium quasi, temporibus voluptas. Accusantium at
                consequuntur, corporis dignissimos doloribus earum excepturi exercitationem ipsa ipsum minima, omnis
                perferendis possimus quae quasi quidem quis ratione!
            </div>
            <div>Ab, accusantium alias asperiores, aspernatur cupiditate dicta dignissimos dolores eaque eligendi error
                excepturi fugiat harum id necessitatibus nulla numquam odit officiis placeat quibusdam quidem sint sit
                soluta veritatis vero voluptatibus.
            </div>
        </div>
    </body>
</html>